<template>
	<div>
		<el-dialog v-model="state.dialog" width="80%" title="优惠券选择器">
			<el-table
				ref="tableRef"
				v-loading="state.loading"
				:data="state.tableData"
				highlight-current-row
				@selection-change="handleCurrentChange"
				:max-height="state.maxHeight"
			>
				<el-table-column type="selection" width="55" />
				<el-table-column prop="couponName" label="优惠券名称" align="center" show-overflow-tooltip></el-table-column>
				<el-table-column prop="picUrl" label="有效时间" align="center" show-overflow-tooltip>
					<template #default="scope">
						{{ scope.row.receiveStartedAt }}-
						{{ scope.row.receiveEndedAt }}
					</template>
				</el-table-column>

				<el-table-column prop="couponType" label="优惠形式" align="center">
					<template #default="scope">
						<span v-if="scope.row.couponType == '1'" type="danger"> 指定金额:{{ scope.row.amount }}元 </span>
						<span v-if="scope.row.couponType == '2'" type="success">{{ scope.row.discount }}折</span>
					</template>
				</el-table-column>
				<el-table-column prop="useRange" label="可用范围" align="center">
					<template #default="scope">
						<el-tag v-if="scope.row.useRange == '1'" type="success">全部商品</el-tag>
						<el-tag v-if="scope.row.useRange == '2'" type="danger">指定商品</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="totalNum" label="发行数量" align="center"></el-table-column>
				<el-table-column prop="assignCount" label="已发放数量" align="center"></el-table-column>
				<el-table-column prop="usedCount" label="已使用数量" align="center"></el-table-column>
				<el-table-column prop="remainNum" label="剩余数量" align="center"></el-table-column>
				<el-table-column prop="status" label="状态" align="center">
					<template #default="scope">
						<dict-tag :options="status" :value="scope.row.status"></dict-tag>
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="创建时间" width="180" />
			</el-table>
			<!-- 分页 -->
			<pagination
				v-model:total="state.page.total"
				v-model:currentPage="state.page.currentPage"
				v-model:pageSize="state.page.pageSize"
				@changePage="initPage"
			></pagination>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="state.dialog = false">关闭</el-button>
					<el-button type="primary" @click="onSubmit"> 确 认 </el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>
<script setup lang="ts" name="selectGoods">
import { reactive, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import type { TableInstance } from 'element-plus';
import { getPage } from '/@/api/promotion/couponinfo';
const emit = defineEmits(['currentRow']);

const props = defineProps({
	limitNum: {
		type: Number,
		default: 1,
	},
});
const tableRef = ref<TableInstance>();
const state = reactive({
	dialog: false,
	loading: false,
	page: {
		total: 0, // 总页数
		currentPage: 1, // 当前页数
		pageSize: 20, // 每页显示多少条
	},
	queryParams: {},
	tableData: [],
	currentList: [], // 选中的商品
	maxHeight: window.screen.availHeight - 500,
});
/**
 * 素材分页列表
 */
const initPage = () => {
	state.dialog = true;
	state.loading = true;
	getPage(
		Object.assign(
			{
				current: state.page.currentPage,
				size: state.page.pageSize,
			},
			state.queryParams
		)
	)
		.then((response) => {
			state.loading = false;
			state.tableData = response.data.data.records;
			state.page.total = response.data.data.total;
		})
		.catch(() => {
			state.loading = false;
		});
};
/**
 * 选择优惠券
 */
const handleCurrentChange = (val: any) => {
	if (val && val.length > props.limitNum) {
		tableRef.value!.clearSelection();
		state.currentList = [];
		return ElMessage.error('最多只能选择【' + props.limitNum + '】个优惠券');
	}
	state.currentList = val;
};
const onSubmit = () => {
	if (state.currentList.length <= 0) {
		return ElMessage.error('请选择优惠券');
	}
	if (state.currentList.length > props.limitNum) {
		return ElMessage.error('最多只能选择【' + props.limitNum + '】个优惠券');
	}
	let message = '已选择 【' + state.currentList[0].couponName + '】等' + state.currentList.length + '个优惠券, 是否继续?';
	ElMessageBox.confirm(message, '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	}).then(() => {
		emit('currentRow', state.currentList);
		state.dialog = false;
	});
};
defineExpose({
	initPage,
});
</script>
